<script lang="ts" setup>
import { displayData } from '@/assets/eventdata';
defineOptions({
  name: 'ShowPage',
})

const visible = ref(false)
const currentImageId = ref<number | null>(null)


const previewImages = computed(() => {
  const currentItem = displayData.find((item) => item.id === currentImageId.value)
  return currentItem?.previewImages || []
})

// 点击预览
const onclick = (item: { id: number }) => {
  currentImageId.value = item.id
  visible.value = true
}
</script>

<template>
  <div class="show">
    <div class="show-content" v-for="item in displayData" :key="item.id">
      <a-image :height="300" style="border-top-left-radius: 10px; border-top-right-radius: 10px"
        :preview="{ visible: false }" @click="onclick(item)" class="show-content-image" :src="item.image" alt="" />
      <div class="show-content-introduction">
        <h1 class="show-content-introduction-title">{{ item.title }}</h1>
        <h3>{{ item.details }}</h3>
      </div>
    </div>
  </div>

  <!-- 点击后预览图片 -->
  <div style="display: none">
    <a-image-preview-group :preview="{ visible, onVisibleChange: (vis) => (visible = vis) }">
      <a-image v-for="src in previewImages" :key="src" :src="src" />
    </a-image-preview-group>
  </div>
</template>

<style lang="scss" scoped>
.show {
  width: 100%;
  margin: 20px;
  display: flex;
  flex-wrap: wrap; // 允许换行
  justify-content: space-evenly; // 自动调整位置

  &-content {
    width: 23%;
    margin-top: 30px;
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background-color: white;
    cursor: pointer;

    &-image {
      width: 100%;
    }

    &-introduction {
      padding: 15px;

      &-title {
        font-weight: 700;
      }
    }
  }
}
</style>
